<template>
	<view class="qilin-followPlayer">
		<video :src="`http://localhost:9999/videos/${src}`" loop :controls="false" objectFit="cover" id="video" @click="clickVideo">
			<cover-view class="iconfont" :class="player?'icon-24gf-pause2':'icon-24gf-play'"></cover-view>
		</video>
	</view>
</template>

<script>
	export default {
		name:"follow",
		props:["src","index"],
		data() {
			return {
				player:false
			};
		},
		methods:{
			//播放视频事件监听
			play(){
				if(!this.player){
					this.videoContext.play();
					this.player=true;
				};
			},
			//暂停视频事件监听
			pause(){
				if(this.player){
					this.videoContext.pause();
					this.player=false;
				};
			},
			//点击视频事件监听
			clickVideo(){
				if(this.player){
					this.videoContext.pause();
					this.player=false;
				}else{
					this.videoContext.play();
					this.player=true;
				};
			}
		},
		onReady(){
			this.videoContext=uni.createVideoContext("video",this);
			if(this.index == 0){
				this.videoContext.play();
				this.player=true;
			};
		}
	}
</script>

<style>
.qilin-followPlayer{
	width:80%;
	height:100%;
}
video{
	width:100%;
	height:100%;
	position:relative;
}
.iconfont{
	color:#fff;
	font-size:24rpx;
	position:absolute;
	bottom:15rpx;
	right:30rpx;
}
</style>
